﻿<!DOCTYPE html>

<html>
<head>
    <title>Slickflow Modeling</title>
    <meta http-equiv="Content-Type" content="text/html;width=device-width;charset=UTF-8" />
    <link rel="stylesheet" href="../../vendor/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="../../vendor/codemirror/lib/codemirror.css" />

    <style type="text/css" media="screen">
        div.base {
            position: absolute;
            overflow: hidden;
            font-family: Arial;
            font-size: 8pt;
        }

        hr {
            border-top: 1px solid #000000 !important;
            margin-bottom: 5px !important;
            margin-top: 5px !important;
        }
    </style>
</head>
<body style="padding: 20px;">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="row" style="float:right;">
                    <span class="a_tit lang" as="templatetype"></span>
                    <select id="ddlTemplateType" class="form-control" style="width:180px;">
                        <option value="default" class="lang" as="optiondefault"></option>
                        <option value="Sequence" class="lang" as="templatesequence"></option>
                        <option value="Parallel" class="lang" as="templateparallel"></option>
                        <option value="BatchUpdate" class="lang" as="templatebatchupdate"></option>
                        <option value="RunProcess" class="lang" as="templaterunprocess"></option>
                    </select>
                </div>
                <div class="row" style="margin-top:60px;margin-bottom:60px;border:1px solid black">
                    <textarea id="txtCode" style="width:500px;"></textarea>
                </div>
                <div class="row">
                    <div class="col" style="margin-left:6px;">
                        <a href="" onclick="processmodel.gotoTutorial();" class="lang" as="slickflowgraphtutorial"></a>
                    </div>
                    <div class="col" style="float:right;">
                        <button class="btn btn-primary lang" as="run" onclick="processmodel.executeGraph();"></button>
                        <button class="btn btn-primary lang" as="close" onclick="window.close();"></button>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="row">
                    <div id="kgraphContainer" style="overflow:scroll;height:300px;" class="base">
                        <!-- Graph Here -->
                    </div>
                </div>
                <div class="row" style="margin-left:90px;margin-top:350px;display:none;" id="divTaskList">
                    <div class="container">
                        <div class="row">
                            <button class="btn btn-primary lang" as="refresh" onclick="processmodel.refreshTask();"></button>
                        </div>
                        <div class="row">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link active lang" as="tasktodolist" id="todo-tab" data-toggle="tab" href="#todo" role="tab" aria-controls="todo" aria-selected="true"></a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link lang" as="taskdonelist" id="done-tab" data-toggle="tab" href="#done" role="tab" aria-controls="done" aria-selected="false"></a>
                                </li>
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="todo" role="tabpanel" aria-labelledby="todo-tab">
                                    <div class="row">
                                        <div id="myToDoTaskGrid" class="ag-bootstrap" style="width:100%;height:160px;float:left;"></div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="done-tab">
                                    <div class="row">
                                        <div id="myDoneTaskGrid" class="ag-bootstrap" style="width:100%;height:160px;float:left;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ag-grid-->
    <!--<script type="text/javascript" src="../../vendor/ag-grid-community/dist/ag-grid-community.min.js"></script>-->

    <script type="text/javascript" src="../../vendor/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="../../vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../vendor/codemirror/lib/codemirror.js"></script>
    <script type="text/javascript" src="../../vendor/codemirror/mode/clike/clike.js"></script>
    <script type="module" src="../../viewjs/kcodestudio.js"></script>

    <script type="text/javascript">
        $(function () {
            kresource.localize('../../');
        });
    </script>
</body>
</html>
